<template>
  <div class="assetsShop">
    <div class="assetsShop-top">
      <span><van-icon name="arrow-left"/></span>
      <span>商家代金券</span>
    </div>
    <div class="assetsShop-bottom">
      <van-tabs v-model:active="active" shrink>
        <van-tab title="默认">
          <van-collapse class="list-juli" v-model="activeNames">
            <div class="ShopList" v-for="item in list" :key="item">
              <div class="ShopList-tupian">
                <img src="item.headPortrait">
              </div>
              <div class="ShopList-data">
                <div class="data-top">
                  <div class="top-left">
                    <span>{{ item.cashCouponName }}</span>
                    <span>有效期至{{item.deadline}}</span>
                  </div>
                  <div class="top-right">
                    <span><span>￥</span><span class="right-jine">{{ item.preferentialAmount }}</span></span>
                    <span>满{{item.threshold}}可用</span>
                  </div>
                </div>
                <van-divider class="xuxian" dashed :style="{borderColor: '#000000'}"></van-divider>
                <div class="data-bottom">
                  <van-collapse-item class="shiyongguize" title="使用规则">
                    {{ item.introductionToUse }}
                  </van-collapse-item>
                  <van-button class="data-botton" @click="getQuShiYong(item.shopId)" type="danger">去使用</van-button>
                </div>
              </div>
            </div>
          </van-collapse>
        </van-tab>
        <van-tab title="领取时间">
          <van-collapse class="list-juli" v-model="activeNames">
            <div class="ShopList" v-for="item in list" :key="item">
              <div class="ShopList-tupian">
                <img src="item.headPortrait">
              </div>
              <div class="ShopList-data">
                <div class="data-top">
                  <div class="top-left">
                    <span>{{ item.cashCouponName }}</span>
                    <span>领取时间{{item.effectiveDate}}</span>
                  </div>
                  <div class="top-right">
                    <span><span>￥</span><span class="right-jine">{{ item.preferentialAmount }}</span></span>
                    <span>满{{item.threshold}}可用</span>
                  </div>
                </div>
                <van-divider class="xuxian" dashed :style="{borderColor: '#000000'}"></van-divider>
                <div class="data-bottom">
                  <van-collapse-item class="shiyongguize" title="使用规则">
                    {{ item.introductionToUse }}
                  </van-collapse-item>
                  <van-button class="data-botton" @click="getQuShiYong(item.shopId)" type="danger">去使用</van-button>
                </div>
              </div>
            </div>
          </van-collapse>
        </van-tab>
        <van-tab title="到期时间">
          <van-collapse class="list-juli" v-model="activeNames">
            <div class="ShopList" v-for="item in list" :key="item">
              <div class="ShopList-tupian">
                <img src="item.headPortrait">
              </div>
              <div class="ShopList-data">
                <div class="data-top">
                  <div class="top-left">
                    <span>{{ item.cashCouponName }}</span>
                    <span>到期时间{{item.deadline}}</span>
                  </div>
                  <div class="top-right">
                    <span><span>￥</span><span class="right-jine">{{ item.preferentialAmount }}</span></span>
                    <span>满{{item.threshold}}可用</span>
                  </div>
                </div>
                <van-divider class="xuxian" dashed :style="{borderColor: '#000000'}"></van-divider>
                <div class="data-bottom">
                  <van-collapse-item class="shiyongguize" title="使用规则">
                    {{ item.introductionToUse }}
                  </van-collapse-item>
                  <van-button class="data-botton" @click="getQuShiYong(item.shopId)" type="danger">去使用</van-button>
                </div>
              </div>
            </div>
          </van-collapse>
        </van-tab>
      </van-tabs>
    </div>
    <div class="yishiyong" @click="getUse()">
      <span>查看无效券</span>
    </div>
  </div>
</template>

<script>
import {ref} from 'vue';

export default {
  name: "MyAssetsShopList",
  data() {
    return {
      list:[],
      active: ref(0),
      activeNames: ref(['0'])
    }
  },
  mounted(){
    this.getAssetsSelShop();
  },
  methods:{
    getAssetsSelShop(){
      this.$axios.get('/assets/selShop')
      .then(res => {
        this.list = res.result.selectShop.filter(item => {
          if (item.shopId > 0) {
            return true;
          }
        });
        console.log(this.list);
      })
    },
    /*getMyAssetsUpd(deadline) {
      this.$axios.get('/assets/upd', {
        params: {
          userId: 1,
          deadline: deadline
        }
      })
    },
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
      this.getMyAssetsUpd(_this.gettime);
    },*/
    getQuShiYong(shopId){
      this.$router.push({
        path:'/shopDishesList',
        query:{
          shopId:shopId
        }
      })
    },
    getUse(){
      this.$router.push('/used');
    }
  }
}
</script>

<style scoped>

.assetsShop {
  background: #F2F2F2;
  font-family: "楷体";
}

.assetsShop-top {
  height: 30px;
  width: 100%;
  background: #FFFFFF;
  position: fixed;
  top: 0;
}

.assetsShop-top span:nth-of-type(1) {
  margin-left: 20px;
  margin-right: 20px;
}

.assetsShop-top span:nth-of-type(2) {
  font-weight: 700;
}

.list-juli .ShopList:last-child{
  margin-bottom: 20px;
}

.ShopList {
  background: #FFFFFF;
  height: 145px;
  width: 360px;
  border-radius: 10px;
  margin: auto;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.ShopList-tupian{
  display: flex;
  align-items:center;
  height: 100%;
  width: 25%;
}

.assetsShop-bottom {
  margin-top: 20px;
}

.data-top {
  display: flex;
  flex-direction: row;
  padding-top: 10px;
}

.top-left {
  display: flex;
  flex-direction: column;
}

.top-left span:nth-of-type(1) {
  font-size: 20px;
  font-weight: bold;
}

.top-left span:nth-of-type(2) {
  font-size: 14px;
  font-weight: 500;
}

.top-right {
  color: red;
  display: flex;
  flex-direction: column;
  margin-left: 120px;
}

.right-jine {
  font-size: 28px;
}

.xuxian {
  width: 90%;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.data-bottom {
  display: flex;
  flex-direction: row;
}

.shiyongguize {
  width: 200px;
  border-radius: 10px;
}

.data-botton {
  height: 30px;
  width: 75px;
  border-radius: 10px;
}

.yishiyong{
  margin: auto;
}
</style>